<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>颜色</title>
    <style>
       body {
         background-color: #eee;        
       }
       #id_box {
          display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         width: 100%;
       }
        .colorbox {
            box-shadow: 0 0 25px rgba(40,47,60,.05), 0 20px 25px rgba(40,47,60,.05), 0 3px 4px rgba(40,47,60,.05);
            padding: 35px 15px 45px 15px;            
            color: #212529;
            text-align: center;
            margin: 5px;            
            width: 150px;
            background-color: #fff;   
            
        }
        .colorbox .cbox{
          position: relative;
          border-radius: 50%;
          margin: 0 auto 15px auto;
          width: 110px;
          height: 110px;
        }
    </style>
</head>
<body>
    <div id="id_box">

    </div>          
    <script>
        var color_list = [  "#ff9900",
                            "#2baadf",
                            "#BD2D30",
                            "#0273dd",
                            "#5cb85c",
                            "#a479e2",
                            "#d94235",
                            "#e9b330",
                            "#fe7300",
                            "#3385ff",
                            "#2d78f4",
                            "#FF555D",
                            "#2CC427",
                            "#0F96FF",
                            "#FF0102",
                            "#BDB5B1",
                            "#19A97B",
                            "#e5e5e5",
                            "#337AB7",
                            "#1171B7",
                            "#FF6684",
                            "#FF9A00",
                            "#55AF32",
                            "#2681FF",
                            "#999999",
                            "#105E96",
                            "#7B4F9D",
                            "#117DF2",
                            "#5FBA7D",
                            "#563D7C",
                            "#7952B3",
                            "#8755D2",
                            "#0099D8",
                            "#007BFF",
                            "#5BC0DE",
                            "#CC52FD",
                            "#155724",
                            "#D4EDDA",
                            "#28A745",
                            "#17A2B8",
                            "#FFC107",
                            "#DC3545",
                            "#0067F4",
                            "#5A6169",
                            "#17C671",
                            "#00B8D8",
                            "#FFB400",
                            "#C4183C",
                            "#E9ECEF",
                            "#212529"];
        var box = document.getElementById("id_box");
        for(var i in color_list){
            var ch = document.createElement("div")
            ch.className = "colorbox";
            
            var colorBox = document.createElement("div");
            colorBox.className = "cbox";
            colorBox.style = "background-color:" + color_list[i].toUpperCase();
            ch.appendChild(colorBox);

            var txtBox = document.createElement("div");
            txtBox.className = "ctxt";
            txtBox.innerHTML = color_list[i].toUpperCase();
            ch.appendChild(txtBox);
                  
            box.appendChild(ch);
        }
        
    </script>
</body>
</html>